<template>
  <div class="editor-container">
    <a-card class="card">
      <a-form ref="editorForm" :model="formState" name="basic" :label-col="{ span: 2 }" autocomplete="off"
        @finish="onSubmit">
        <a-form-item label="标题" name="title" :rules="[{ required: true, message: '请输入标题' }]">
          <a-input v-model:value="formState.title" placeholder="请输入标题" />
        </a-form-item>
        <a-form-item label="内容" name="content" :rules="[{ required: true, message: '请输入内容' }]">
          <wangEditor v-model="formState.content" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 2 }">
          <div class="action-btn">
            <a-button type="primary" html-type="submit">提交</a-button>
            <a-button type="default" @click="onPreview">预览</a-button>
            <a-button type="default" @click="onReset">重置</a-button>
          </div>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
  <!-- 预览弹框 -->
  <a-modal v-model:visible="previewShow" title="预览" :footer="null">
    <a-descriptions :column="1">
      <a-descriptions-item label="标题">{{ formState.title }}</a-descriptions-item>
      <a-descriptions-item label="预览">
        <div v-html="formState.content"></div>
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script lang='ts'>
import { ref } from 'vue';
import { FormInstance, message } from 'ant-design-vue';
import wangEditor from "@/components/wangeEditor/index.vue";

export default {
  components: {
    wangEditor,
  },
  setup() {
    const editorForm = ref<FormInstance>();
    const formState = ref({
      title: '归去来兮辞',
      content: '<h2><span style="color: rgb(15, 15, 15); background-color: rgb(240, 239, 226); font-size: 22px;"><strong>归去来兮辞</strong></span></h2><p><span style="color: rgb(15, 15, 15); background-color: rgb(240, 239, 226); font-size: 15px;">归去来兮，田园将芜胡不归？</span></p><p><span style="color: rgb(15, 15, 15); background-color: rgb(240, 239, 226); font-size: 16px;">既自以心为形役，奚惆怅而独悲？</span></p><p><span style="color: rgb(15, 15, 15); background-color: rgb(240, 239, 226); font-size: 14px;"><s>悟已往之不谏，知来者之可追。</s></span></p><p><span style="color: rgb(15, 15, 15); background-color: rgb(240, 239, 226); font-size: 14px;"><s>实迷途其未远，觉今是而昨非。</s></span></p><div data-w-e-type="todo" style="line-height: 2;"><input type="checkbox" disabled=""><span style="color: rgb(15, 15, 15); background-color: rgb(240, 239, 226); font-size: 24px; font-family: 华文楷体;">舟遥遥以轻飏，风飘飘而吹衣。</span></div><div data-w-e-type="todo" style="line-height: 2;"><input type="checkbox" disabled=""><span style="color: rgb(15, 15, 15); background-color: rgb(240, 239, 226); font-size: 24px; font-family: 华文楷体;">问</span><span style="color: rgb(15, 15, 15); background-color: rgb(240, 239, 226); font-size: 24px; font-family: 华文楷体;"><u>征夫以前路，恨晨光之熹微。</u></span></div>',
    });
    const previewShow = ref(false);

    const onSubmit = () => {
      message.success('数据上传至服务器');

    }
    const onReset = () => {
      formState.value.content = '';
      formState.value.title = '';
      // editorForm.value!.resetFields();
    }
    const onPreview = () => {
      editorForm.value!.validateFields().then(() => {
        previewShow.value = true;
      })
    }
    return {
      mode: 'default', // 或 'simple'
      formState,
      editorForm,
      previewShow,

      onSubmit,
      onReset,
      onPreview,
    };
  }
}
</script>
<style lang='less' rel='stylesheet/less' scoped>
.editor-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;

    .action-btn {
      :deep(.ant-btn) {
        margin-right: 10px;
      }
    }
  }
}
</style>